<template>
  <div>
    <div style="width: 100%; height: 300px;padding-left:50px;">
      <h3 style="text-align: center;">老师热力榜</h3>
      <el-row  :gutter="20">
        <el-col :span="1" v-for="o in list" :key="o" >
          <el-card :body-style="{padding: '0px'}">
            <img :src="o.price" class="image"/>
            <div style="margin: 14px">
              <span class="tea"  style="text-align: center;display:block;">{{ o.title }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="center" style="width: 100%">
    <div style="width: 50%; height: 400px">
      <h5 style="text-align: center;">科目销售额</h5>
      <div id="main" style="width: 100%; height: 350px"></div>
    </div>
    <div style="width: 50%; height: 400px"><div id="bing" style="width: 100%; height: 400px"></div></div>
    </div>
  </div>
</template>
<script>
import { delMequeryclassify, average, queryTeacher } from "@/api/system/member";
var echarts = require("echarts");
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    getlist() {
      queryTeacher().then((res) => {
        this.list = res.data;
      });
    },
    set() {
      delMequeryclassify().then((response) => {
        var list = response.data;
        let title = [];
        let price = [];
        for (let i = 0; i < list.length; i++) {
          title.push(list[i].title);
          price.push(list[i].price);
        }
        this.tiao(title, price);
      });

      average().then((response) => {
        var list = response.data;
        let data = [];
        for (let i = 0; i < list.length; i++) {
          var data1 = {};
          data1.name = list[i].title;
          data1.value = list[i].price;
          data.push(data1);
        }
        console.log(data);
        this.bing(data);
      });
    },
    bing(data) {
      var chartDom = document.getElementById("bing");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "课程的平均分",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    tiao(title, price) {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: title,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: price,
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.set();
    this.getlist();
  },
};
</script>
<style scoped>
.tea{
  font-size: 25px;
}
.el-row{

  display: flex;
  justify-content: space-around;
}
.el-col{
  width: 200px;

}
.center {
  display: flex;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>














